// input点击边框变颜色
// 获取元素
let input = document.querySelectorAll('.input_one')
let lab = document.querySelectorAll('label')
let span = document.querySelectorAll('.login_right_main_3 span')
let sub = document.querySelector('.input_sub')
console.log(span)
// 遍历
for (let i = 0; i < input.length; i++) {
    input[i].onfocus = function () {
        // this.style.borderColor='red'
        // console.log(111)

        lab[i].style.fontSize = '12px'
        lab[i].style.top = '-18px'
        for (let j = 0; j < input.length; j++) {
            input[j].style.border = 0
        }
        this.style.border = '1px solid rgb(255, 106, 0)'
    }
    //   失去焦点后的样式
    input[i].onblur = function () {
        // this.style.borderColor='red'
        // console.log(111)
        let va = input[i].value
        //    console.log(va)
        if (!va) {
            lab[i].style.fontSize = '16px'
            lab[i].style.top = '0px'
            input[i].style.border = 0
        } else if (va) {
            lab[i].style.fontSize = '12px'
            lab[i].style.top = '-18px'
            input[i].style.border = 0
        }
    }
}

// 点击登录事件
async function denglu() {
    let vau = input[0].value
    let pass = input[1].value
   
    sub.style.backgroundColor='#ff7e29'
    if (namecheck() && passcheck()) {
        // console.log(111)
        // console.log(vau, pass, pas)
        // 发送ajax请求,获取数据，判断是否存在
        let {
            data
        } = await axios.get('http://localhost:3000/users?name='+vau)
        // console.log(data[0].password)
        // console.log(data[0].name)
        if(!data[0]){
            alert('用户不存在，请先注册')
        }else if(data[0].password==pass){
        //    alert('登录成功')
        location.href="http://localhost/xiaomi/html/index.html"
       }else{
           alert('密码错误')
       }
    
    }

}

// 用户名正则匹配
// 获取焦点
function namecheck(skr) {
    let reg = /^[\u4e00-\u9fa5]{2,4}$/
    let vau = input[0].value
    //    console.log(span)
    if (vau == '') {
        lab[0].style.fontSize = '16px'
        lab[0].style.top = '0px'
        input[0].style.border = 0
        span[0].style.display = 'none'

    } else if (!reg.test(vau)) {
        span[0].style.display = 'block'
        // console.log(span[0])
        return
    } else {
        span[0].style.display = 'none'
        input[0].style.border = 0
        return true
    }


}
// 密码正则匹配
function passcheck(skr) {
    let reg = /^(\w){6,20}$/;
    let pwd = input[1].value
    if (pwd == '') {
        lab[1].style.fontSize = '16px'
        lab[1].style.top = '0px'
        input[1].style.border = 0
        span[1].style.display = 'none'

    } else if (!reg.test(pwd)) {
        span[1].style.display = 'block'
        return false
    } else {
        span[1].style.display = 'none'
        input[1].style.border = 0
        return true;
    }
}

